<template>
  <div class="op-tabItem">
    <div
      class="op-tabItem-item"
      v-for="(item, index) of dataList"
      :key="index"
    >
      <div class="op-tabItem-item-icon">
        {{ index + 1 }}
      </div>
      <div class="op-tabItem-item-content">
        <div class="op-tabItem-item-content-label">
          {{ item.name }}
        </div>
        <div class="op-tabItem-item-content-val">
          <div class="op-tabItem-item-content-val-num">
            {{
              item.percent
                ? item.percent.substring(
                    0,
                    item.percent.length - 1
                  )
                : 0
            }}
          </div>
          %
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array
    }
  }
}
</script>
<style lang="scss">
.op-tabItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  &-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    margin-bottom: 25px;
    &-icon {
      width: 50px;
      height: 56px;
      margin-right: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-family: DIN;
      font-weight: bold;
      background: url('~@/assets/img/overview/kc-right-rank4.png')
        no-repeat;
      background-size: 100% 100%;
      color: #a8bad2;
    }
    &-content {
      width: calc(100% - 58px);
      height: 56px;
      background: url('~@/assets/img/overview/td-mid-bg.png')
        no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 17px;
      &-label {
        line-height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        // font-weight: bold;
        color: #4c565c;
      }
      &-val {
        line-height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        color: #4c565c;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        &-num {
          line-height: 16px;
          font-size: 16px;
          font-family: DIN;
          color: #000000;
          font-weight: bold;
          margin: 0 2px -2px 0;
        }
      }
    }
    &:first-child {
      .op-tabItem-item-icon {
        background: url('~@/assets/img/overview/kc-right-rank1.png')
          no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
    }
    &:nth-child(2) {
      .op-tabItem-item-icon {
        background: url('~@/assets/img/overview/kc-right-rank2.png')
          no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
    }
    &:nth-child(3) {
      .op-tabItem-item-icon {
        background: url('~@/assets/img/overview/kc-right-rank3.png')
          no-repeat;
        background-size: 100% 100%;
        color: #ffffff;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
